<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex  justify-start  " style="flex-direction: column;">
			<image mode="" class="picture2 " :src="picsrc2"></image>
			<image style="width:244rpx;height:254rpx;min-height:unset;" mode="" class="picture3 " :src="picsrc3">
			</image>
			<view class="flex4   response  flex  justify-start  " style="flex-direction: column;">



				<view class="flex5   response  flex  justify-start  "
					style="flex-direction: column;height:96rpx;min-height:unset;">
					<text class="text6 text-white " @click="quickLogin"> 授权登录</text>
				</view>


				<view class="flex7   response  flex  justify-start  " @click="cancel"
					style="flex-direction: column;height:96rpx;min-height:unset;">
					<text class="text8 text-gray "> 取消登录</text>
				</view>
			</view>
		</view>
		<uni-id-pages-fab-login v-show="false" ref="uniFabLogin"></uni-id-pages-fab-login>
		<!--vuebottom-->
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		data() {
			return {
				picsrc2: "/static/login/person.png",
				picsrc3: "/static/login/gifit.png",
			};
		},
		onShow() {
			if (this.hasLogin) {
				uni.showToast({
					title: '已登录',
					icon: 'none'
				});
				uni.navigateTo({
					url: './index',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		computed: {
			hasLogin() {
				return store.hasLogin
			}
		},
		methods: {
			cancel() {
				console.log("555");
				uni.reLaunch({
					url: './index'
				})
			},
			quickLogin(e) {
				if (this.hasLogin) {
					uni.showToast({
						title: '已登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: './index',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					let options = {}
					this.$refs.uniFabLogin.login_before('weixin', true, options)
				}

			}
			/**
			 *          $vuetag = "";
			 *          $vuecss = "";
			 *          $vuejs = "";
			 *
			 */

			//获取数据

		}
	}
</script>

<style lang="less">
	/**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




	/**本页全局配置的代码**/
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		background-color: rgba(255, 255, 255, 1);
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
		background-image: linear-gradient(to bottom, rgba(228, 226, 250, 1), white);
	}

	.picture2 {
		overflow: hidden;
		margin-top: 254rpx;
		margin-left: 128rpx;
		margin-right: 128rpx;
	}

	.picture3 {
		width: calc(244rpx - 604rpx);
		overflow: hidden;
		height: 254rpx;
		margin-top: -60rpx;
		margin-left: 306rpx;
		margin-right: 302rpx;
	}

	.flex4 {
		width: 100%;
	}

	.flex5 {
		width: 100%;
		width: calc(100% - 168rpx);
		height: 96rpx;
		background-color: rgba(255, 112, 162, 1);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 86rpx;
		margin-right: 84rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.text6 {
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		margin-left: 240rpx;
		margin-right: 0rpx;
	}

	.flex7 {
		width: 100%;
		width: calc(100% - 168rpx);
		height: 96rpx;
		background-color: rgba(242, 242, 242, 1);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 86rpx;
		margin-right: 84rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.text8 {
		color: rgba(128, 128, 128, 1);
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		margin-left: 240rpx;
		margin-right: 0rpx;
	}
</style>